/**
* Copyright @ 2023 iAuto (Shanghai) Co., Ltd.
* All Rights Reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are NOT permitted except as agreed by
* iAuto (Shanghai) Co., Ltd.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*/

import React, { useEffect } from 'react';
import { Button, Form, Input, Table } from 'antd';
import { useAntdTable } from 'ahooks';
import classNames from 'classnames';
import { SearchOutlined } from '@ant-design/icons';
import styles from './index.less';
import { getOneCarOneGearTabList } from '@/services/soa/oneCarOneGearScene';
import { IOneCarOneGearTabEnum } from '@/types/oneCarOneGearScene';
import useAuth from '@/utils/soa/useAuth';
import { showTotal } from '../../abilitymanagement/utils';

interface Item {
  name: {
    last: string;
  };
  email: string;
  phone: string;
  gender: 'male' | 'female';
}

  // eslint-disable-next-line
interface Result {
  total: number;
  list: Item[];
}

interface IStabel {
  columns: any[];
  url: string;
  rowKey: string;
  vin: string;
  menu: any;//菜单数据
  [extraKey: string]: any;
}

const STable: React.FC<IStabel> = (props) => {
  const { columns, url, rowKey, vin, menu, ...extraProps } = props;

  // 按钮权限map
  const hasAuth = {
    'serviceSearch': useAuth('/soaManage/oneCarOneGear/oneCarOneGear_service_doSearch', menu),
    'abilitySearch': useAuth('/soaManage/oneCarOneGear/oneCarOneGear_ability_doSearch', menu),
    'sceneSearch': useAuth('/soaManage/oneCarOneGear/oneCarOneGear_scene_doSearch', menu),
  }

  const [form] = Form.useForm();


  const getTableData = async ({ current, pageSize }: any, formData: any) => {
    const { data } = await getOneCarOneGearTabList(url, Object.assign({}, formData, { current: current, pagesize: pageSize, vin: vin }))
    let result = {
      total: 0,
      list: [],
    }

    const { dataList, pageCount } = data;

    if (url === IOneCarOneGearTabEnum[1]) { // 服务
      const list = dataList[0]?.services.map((item: any) => ({ ...item, socVersion: dataList[0]?.socVersion })) || [];
      result.list = list;
      result.total = pageCount;
    }

    if (url === IOneCarOneGearTabEnum[2]) { // 能力
      const list = dataList[0]?.skills.map((item: any) => ({ ...item, socVersion: dataList[0]?.socVersion })) || [];
      result.list = list;
      result.total = pageCount;
    }

    if (url === IOneCarOneGearTabEnum[3]) { // 场景
      const list = dataList;
      result.list = list;
      result.total = pageCount;
    }

    return result
  };

  const {
    tableProps: { pagination, ...tableProps },
    search,
    // params,
  } = useAntdTable(getTableData, {
    defaultPageSize: 10,
    form,
    ready: !!vin
  });

  const { submit, reset } = search;

  const renderButton = () => {
    if (hasAuth.serviceSearch && url === IOneCarOneGearTabEnum[1]) {
      return <Button className={classNames(styles.search)} type="primary" size="small" onClick={submit}>查询</Button>
    } else if (hasAuth.abilitySearch && url === IOneCarOneGearTabEnum[2]) {
      return <Button className={classNames(styles.search)} type="primary" size="small" onClick={submit}>查询</Button>
    } else if (hasAuth.sceneSearch && url === IOneCarOneGearTabEnum[3]) {
      return <Button className={classNames(styles.search)} type="primary" size="small" onClick={submit}>查询</Button>
    } else {
      return null
    }
  }

  useEffect(() => {
    if (vin) {
      reset();
    }
  }, [vin]);


  const searchForm = (
    <div>
      <Form form={form} style={{ display: 'flex', justifyContent: ' space-between' }}>
        <Form.Item name="name">
          <Input
            maxLength={20}
            placeholder="请输入关键字查询"
            // size="large"
            style={{
              width: 248,
              // borderRadius: 5,
              // height: 32,
              // borderStyle: 'solid',
              // borderColor: '#d9d9d9',
              // padding: '10px 15px',
            }}
            allowClear
            suffix={<SearchOutlined onClick={submit} />}
          />
        </Form.Item>
        {renderButton()}
      </Form>
    </div>
  );

  return (
    <div
      {...extraProps}
    >
      {searchForm}

      <Table
        columns={columns}
        rowKey={rowKey || 'id'}
        size="small"
        pagination={{
          ...pagination,
          showTotal
        }}
        {...tableProps}
      />
    </div>
  );
};

export default STable;
